<nz-row>
  <div class="searchItem">
    <label for="templateName">企业名称</label>
    <input id="templateName" nz-input placeholder="请输入企业名称" [(ngModel)]="query.name"/>
  </div>
  <div class="searchItem">
    <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
    <button nz-button nzType="default" (click)="resetQuery()">重置</button>
  </div>
</nz-row>
<!--操作-->
<nz-row>
  <button nz-button nzType="primary" (click)="add()">添加</button>
</nz-row>
<!--表格-->
<nz-table
  #rowSelectionTable
  nzSize="small"
  nzShowSizeChanger
  nzShowQuickJumper
  nzOuterBordered
  [nzData]="listOfData.records"
  [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
  [nzTotal]="listOfData.total"
  [(nzPageIndex)]="query.current"
  [(nzPageSize)]="query.size"
  [nzFrontPagination]="false"
  [nzShowTotal]="totalTemplate"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
>
  <thead>
  <tr>
    <th nzAlign="center">公司名称</th>
    <th nzAlign="center">公司logo</th>
    <th nzAlign="center">公司地址</th>
    <th nzAlign="center">公司联系人</th>
    <th nzAlign="center">公司联系邮箱</th>
    <th nzAlign="center">公司简介</th>
    <th nzAlign="center">公司电话</th>
    <th nzAlign="center">企业法人</th>
    <th nzAlign="center">组织机构代码</th>
    <th nzAlign="center">法人身份证号码</th>
    <th nzAlign="center" nzWidth="180px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of rowSelectionTable.data;let index=index;">
    <!--    <td nzAlign="center">{{ index + 1 }}</td>-->
    <td nzAlign="center">{{ data['comName'] }}</td>
    <td nzAlign="center"><img nz-image width="40px" height="40px" *ngIf="data['comLogo']" [nzSrc]="data['comLogo']" alt=""/></td>
    <td nzAlign="center">{{ data['comAddress'] }}</td>
    <td nzAlign="center">{{ data['comContant'] }}</td>
    <td nzAlign="center">{{ data['comMail'] }}</td>
    <td nzAlign="center">{{ data['comDesc'] }}</td>
    <td nzAlign="center">{{ data['comPhone'] }}</td>
    <td nzAlign="center">{{ data['contant'] }}</td>
    <td nzAlign="center">{{ data['orgCode'] }}</td>
    <td nzAlign="center">{{ data['identityCode'] }}</td>
    <td nzAlign="center">
      <a (click)="view(data)">查看</a>
      <a (click)="edit(data)">编辑</a>
      <a style="color: #F56C6C"
         nzPopconfirmPlacement="top"
         nz-popconfirm
         nzPopconfirmTitle="确认要删除该数据吗?"
         nzOkText="确认"
         nzCancelText="取消"
         (nzOnConfirm)="deleteRow(data['id'])">删除</a>
    </td>
  </tr>
  </tbody>
</nz-table>
<!-- 分页template -->
<ng-template #totalTemplate let-total>共有 {{ listOfData.total }} 条</ng-template>
<!--模态框-->
<nz-modal [(nzVisible)]="modal.modalVisible" [nzTitle]="modal.operationType" (nzOnCancel)="handleModalCancel()"
          [nzMaskClosable]="modal.operationType==='查看'"
          [nzOkLoading]="modal.loading" [nzOkText]="modal.operationType==='查看'?null:'保存'"
          (nzOnOk)="handleModalOk()">
  <ng-container *nzModalContent>
    <nz-row class="modalRow">
      <label for="name"><span>*</span>名称:</label>
      <input id="name" nz-input placeholder="请输入分类名称"
             [disabled]="modal.operationType==='查看'" [maxLength]="50"
             [(ngModel)]="formData.comName"/>
    </nz-row>
    <nz-row class="modalRow" *ngIf="modal.operationType!=='查看'||modal.operationType==='查看'&&formData.comLogo">
      <label>公司logo:</label>
      <div class="image" *ngIf="formData.comLogo">
        <div class="btnRow">
          <i nz-icon nzType="eye" nzTheme="outline" (click)="previewImage(formData.comLogo)"></i>
          <i nz-icon nzType="delete" nzTheme="outline" (click)="removeOptionImage(formData)"
             *ngIf="modal.operationType!=='查看'"></i>
        </div>
        <img [src]="formData.comLogo" alt="">
      </div>
      <div class="uploadFile" *ngIf="!formData.comLogo&&modal.operationType!=='查看'">
        <i nz-icon nzType="plus" nzTheme="outline"></i>
        <input type="file" (change)="fileChange($event,formData)">
      </div>
    </nz-row>
    <nz-row class="modalRow" *ngIf="modal.operationType!=='查看'||modal.operationType==='查看'&&formData.comAddress">
      <label for="address">公司地址:</label>
      <input id="address" nz-input placeholder="请输入公司地址"
             [disabled]="modal.operationType==='查看'" [maxLength]="100" [(ngModel)]="formData.comAddress"/>
    </nz-row>
    <nz-row class="modalRow" *ngIf="modal.operationType!=='查看'||modal.operationType==='查看'&&formData.comContant">
      <label for="contacts">公司联系人:</label>
      <input id="contacts" nz-input placeholder="请输入公司联系人"
             [disabled]="modal.operationType==='查看'" [maxLength]="50" [(ngModel)]="formData.comContant"/>
    </nz-row>
    <nz-row class="modalRow" *ngIf="modal.operationType!=='查看'||modal.operationType==='查看'&&formData.comMail">
      <label for="email">公司联系邮箱:</label>
      <input id="email" nz-input placeholder="请输入公司联系邮箱"
             [disabled]="modal.operationType==='查看'" [maxLength]="100" [(ngModel)]="formData.comMail"/>
    </nz-row>
    <nz-row class="modalRow" *ngIf="modal.operationType!=='查看'||modal.operationType==='查看'&&formData.comDesc">
      <label for="about">公司简介:</label>
      <input id="about" nz-input placeholder="请输入公司简介"
             [disabled]="modal.operationType==='查看'" [maxLength]="500" [(ngModel)]="formData.comDesc"/>
    </nz-row>
    <nz-row class="modalRow" *ngIf="modal.operationType!=='查看'||modal.operationType==='查看'&&formData.comPhone">
      <label for="phone">公司电话:</label>
      <input id="phone" nz-input placeholder="请输入公司电话"
             [disabled]="modal.operationType==='查看'" [maxLength]="15" [(ngModel)]="formData.comPhone"/>
    </nz-row>
    <nz-row class="modalRow" *ngIf="modal.operationType!=='查看'||modal.operationType==='查看'&&formData.contant">
      <label for="legalPerson">企业法人:</label>
      <input id="legalPerson" nz-input placeholder="请输入企业法人"
             [disabled]="modal.operationType==='查看'" [maxLength]="50" [(ngModel)]="formData.contant"/>
    </nz-row>
    <nz-row class="modalRow" *ngIf="modal.operationType!=='查看'||modal.operationType==='查看'&&formData.orgCode">
      <label for="orgCode">组织机构代码:</label>
      <input id="orgCode" nz-input placeholder="请输入组织机构代码"
             [disabled]="modal.operationType==='查看'" [maxLength]="200" [(ngModel)]="formData.orgCode"/>
    </nz-row>
    <nz-row class="modalRow" *ngIf="modal.operationType!=='查看'||modal.operationType==='查看'&&formData.identityCode">
      <label for="legalPersonId">法人身份证号码:</label>
      <input id="legalPersonId" nz-input placeholder="请输入法人身份证号码"
             [disabled]="modal.operationType==='查看'" [maxLength]="50" [(ngModel)]="formData.identityCode"/>
    </nz-row>
  </ng-container>
</nz-modal>
